import React, { useState } from 'react'
import UploadComponent from './UploadCom'
import { InboxOutlined } from '@ant-design/icons'
import styles from './UploadPlay.module.scss'
import './common.css'

const Children = () => {
  return (
    <div>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      {/* <p className="ant-upload-text" style={{color: '#777', fontSize: '14px'}}>点击上传或拖拽文件至此</p> */}
      <p className="ant-upload-hint" style={{ color: '#777', fontSize: '14px' }}>Click or drag file to this area to upload</p>
    </div>
  )
}

const config = {
  // accept: ['fa', 'xml', 'gb', 'gbk', 'gbff', 'genbank', 'gp', 'genpept']
  accept: [],
  max: 20, //限制上传文件大小M
}

const UploadFile = (props) => {
  const type = props.sequenceData.type
  let text
  if (type === 'PROTEIN' || type === 'protein') {
    config.accept = ['fa', 'fas', 'fasta', 'fna', 'genpep', 'genpept', 'gp', 'gpt']
    text = 'Upload protein sequence (.fa, .gb)'
  } else {
    config.accept = ['ab1', 'abi', 'dna', 'fa', 'fas', 'fasta', 'fna', 'gb', 'gbank', 'gbff', 'gbk', 'gbs', 'gbwithparts', 'gen', 'genbank', 'gp', 'sbol', 'seq', 'xml']
    text = 'Upload nucleotide sequence or trace files (.fa, .gb, .xml, .ab1)'
  }
  const [fileList, setFileList] = useState([])
  const onSuccess = file => {
    if (window.Avue) {
      window.Avue.v_fileUploadPost(file)
    }
    setFileList([file])
  }


  return (
    <div style={{ maxWidth: '100%' }}>
      <p className={props.darkMode ? styles.titleDark : styles.title}> {text} </p>
      <UploadComponent
        listType="text"
        maxCount={1}
        multiple={false}
        openFileDialogOnClick={true}
        showUploadList={{ showRemoveIcon: false }}
        config={config}
        fileList={fileList}
        sequenceData={props.sequenceData}
        onSuccess={onSuccess} >
        <Children />
      </UploadComponent>
    </div>
  )
}

export default UploadFile